refactor: migrate Builder & Knowledge Graph to React Flow + dependency refresh - #5
Merged
Merged
Conversation
…dependencies
React Flow migration (net -660 lines):
- Builder canvas rewritten on @xyflow/react: drag-to-connect anchors
(loose connection mode), click-to-delete edges, Backspace deletion,
multi-select, minimap with category colors, on-canvas zoom controls,
and fit-view — replacing ~570 lines of hand-rolled pan/zoom/drag/
edge-drawing code in Canvas.jsx
- Knowledge Graph rewritten on React Flow + dagre: a layered
(Sugiyama) left-to-right layout replaces the d3-force simulation,
so every prerequisite sits in an earlier column than its dependents;
HTML concept pills replace SVG circles; lineage highlighting,
filters, tracks, and the slide-over panel carry over unchanged
- Persisted board format is unchanged: the app store now holds the
React Flow shape and src/components/builder/boardModel.js converts
at the boundaries (board load/save, templates, export, AI verify);
existing boards load as-is and auto-save round-trips verified
- Removed dead Builder UI: the non-functional Select/Text/Arrow/Color
tools and the unwired Undo/Redo buttons
- Consolidated the duplicated icon and category-color maps into
boardModel.js; category colors now derive from BUILDER_COMPONENTS
(fixes Resiliency components rendering with the fallback color)
- Fixed: the global 'img, svg { max-width: 100% }' reset collapsed
React Flow's edge SVGs to zero width (scoped override + gotcha doc)
- Removed dependency: d3-force. Added: @xyflow/react, @dagrejs/dagre
Dependency upgrades (npm audit: 10 vulnerabilities -> 0):
- In-range: react 19.2.8, react-router-dom 7.18.2 (fixes 5 CVEs),
vite 8.2.1, concurrently 10.0.5 (fixes shell-quote DoS), eslint
10.8.1, mermaid 11.16.1, lucide-react 1.31, zustand 5.0.15, and the
rest of the wanted column
- Majors, each verified against the suite: react-markdown 10,
better-sqlite3 13, @testing-library/jest-dom 7, jsdom 30
- Deliberately skipped: katex 0.18 (rehype-katex@7 bundles its own
katex ^0.16; a top-level bump would desync CSS from rendering)
Testing:
- vitest.setup.js gains the official React Flow jsdom mocks
(DOMMatrixReadOnly, element dimensions, SVG getBBox)
- Builder tests rewritten to test behavior (store state, rendered
labels, React Flow chrome) instead of implementation pixels
- 250 tests pass; verified live in Chrome: board load, node drag,
drawing a connection by mouse, auto-save persisting the legacy
format, edge click-delete, deep links, complex 17-node board,
graph lineage highlighting, node panel, light theme
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the hand-rolled diagram engines in both graph surfaces with React Flow (
@xyflow/react), deletes more code than it adds (−548 net lines), and refreshes the dependency tree (npm audit: 10 vulnerabilities → 0).🎨 Builder — React Flow canvas
Canvas.jsxshrinks from ~570 lines of hand-rolled pan/zoom/drag/edge-drawing to a ~200-line controlled React Flow component.⌘S, AI Verify.🕸️ Knowledge Graph — layered dagre layout
d3-forceremoved;@dagrejs/dagreadded.🔒 Persistence unchanged (zero migration)
The database, templates, and server keep the legacy board shape (
x/y,from/to, anchors). The app store holds the React Flow shape;src/components/builder/boardModel.jsconverts only at the boundaries. Verified live: existing boards load as-is, and a mouse-drawn drag + new connection auto-saved back in the legacy format.Also fixed along the way: the design system's global
img, svg { max-width: 100% }reset collapsed React Flow's edge SVGs to zero width (scoped override + AGENTS.md gotcha), and category colors now derive fromBUILDER_COMPONENTS— Resiliency components previously fell back to indigo.📦 Dependency refresh
react-router-dom7.18.2 (fixes 5 advisories incl. open redirect + DoS),concurrently10.0.5 (shell-quote DoS),vite8.2.1 (postcss). Audit: 10 → 0 vulnerabilitieswantedcolumnreact-markdown9→10,better-sqlite312→13 (native module load + server boot verified),@testing-library/jest-dom6→7,jsdom29→30@xyflow/react12.11, +@dagrejs/dagre3.1 · −d3-forcekatex0.18 —rehype-katex@7bundles its ownkatex ^0.16; bumping the top-level package would desync the loaded CSS from what rehype-katex rendersBundle cost: +45 KB gzip (561 → 606 KB).
Testing
vitest.setup.jsadds the official React Flow jsdom mocks (DOMMatrixReadOnly, element dimensions,getBBox)./builder?board=deep link, a 17-node complex board, graph lineage highlighting, node panel, filters, and markdown/mermaid rendering after the react-markdown major.🤖 Generated with Claude Code